<div class="modal fade" role="dialog" aria-modal="true" attr.aria-label="{{ 'settings' | i18n }}">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body form">
        <div class="box">
          <div class="box-header">
            {{ "settingsTitle" | i18n: currentUserEmail }}
          </div>
          <div class="box-content box-content-padded">
            <h2>
              <button
                id="app-settings"
                type="button"
                class="box-header-expandable"
                (click)="showSecurity = !showSecurity"
                [attr.aria-expanded]="showSecurity"
                appAutofocus
              >
                {{ "security" | i18n }}
                <i
                  *ngIf="!showSecurity"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showSecurity"
                  class="bwi bwi-chevron-up bwi-sm icon"
                  aria-hidden="true"
                ></i>
              </button>
            </h2>
            <ng-container *ngIf="showSecurity">
              <app-vault-timeout-input
                [vaultTimeouts]="vaultTimeouts"
                [formControl]="vaultTimeout"
                ngDefaultControl
              ></app-vault-timeout-input>
              <div class="form-group">
                <label>{{ "vaultTimeoutAction" | i18n }}</label>
                <div class="radio radio-mt-2">
                  <label for="vaultTimeoutActionLock">
                    <input
                      type="radio"
                      name="VaultTimeoutAction"
                      id="vaultTimeoutActionLock"
                      value="lock"
                      [(ngModel)]="vaultTimeoutAction"
                      (change)="saveVaultTimeoutOptions()"
                    />
                    {{ "lock" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "vaultTimeoutActionLockDesc" | i18n }}</small>
                <div class="radio">
                  <label for="vaultTimeoutActionLogOut">
                    <input
                      type="radio"
                      name="VaultTimeoutAction"
                      id="vaultTimeoutActionLogOut"
                      value="logOut"
                      [(ngModel)]="vaultTimeoutAction"
                      (change)="saveVaultTimeoutOptions()"
                    />
                    {{ "logOut" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "vaultTimeoutActionLogOutDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="pin">
                    <input
                      id="pin"
                      type="checkbox"
                      name="PIN"
                      [(ngModel)]="pin"
                      (change)="updatePin()"
                    />
                    {{ "unlockWithPin" | i18n }}
                  </label>
                </div>
              </div>
              <div class="form-group" *ngIf="supportsBiometric">
                <div class="checkbox">
                  <label for="biometric">
                    <input
                      id="biometric"
                      type="checkbox"
                      name="biometric"
                      [checked]="biometric"
                      (change)="updateBiometric()"
                    />
                    {{ biometricText | i18n }}
                  </label>
                </div>
              </div>
              <div class="form-group" *ngIf="supportsBiometric">
                <div class="checkbox">
                  <label for="noAutoPromptBiometrics">
                    <input
                      id="noAutoPromptBiometrics"
                      type="checkbox"
                      name="noAutoPromptBiometrics"
                      [(ngModel)]="noAutoPromptBiometrics"
                      [disabled]="!biometric"
                      (change)="updateNoAutoPromptBiometrics()"
                    />
                    {{ noAutoPromptBiometricsText | i18n }}
                  </label>
                </div>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAccountPreferences = !showAccountPreferences"
                [attr.aria-expanded]="showAccountPreferences"
              >
                {{ "accountPreferences" | i18n }}
                <i
                  *ngIf="!showAccountPreferences"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showAccountPreferences"
                  class="bwi bwi-chevron-up bwi-sm icon"
                  aria-hidden="true"
                ></i>
              </button>
            </h2>
            <ng-container *ngIf="showAccountPreferences">
              <div class="form-group">
                <label for="clearClipboard">{{ "clearClipboard" | i18n }}</label>
                <select
                  id="clearClipboard"
                  name="ClearClipboard"
                  [(ngModel)]="clearClipboard"
                  (change)="saveClearClipboard()"
                >
                  <option *ngFor="let o of clearClipboardOptions" [ngValue]="o.value">
                    {{ o.name }}
                  </option>
                </select>
                <small class="help-block">{{ "clearClipboardDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="minimizeOnCopyToClipboard">
                    <input
                      id="minimizeOnCopyToClipboard"
                      type="checkbox"
                      name="MinimizeOnCopyToClipboard"
                      [(ngModel)]="minimizeOnCopyToClipboard"
                      (change)="saveMinOnCopyToClipboard()"
                    />
                    {{ "minimizeOnCopyToClipboard" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "minimizeOnCopyToClipboardDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="disableFavicons">
                    <input
                      id="disableFavicons"
                      type="checkbox"
                      name="DisableFavicons"
                      [(ngModel)]="disableFavicons"
                      (change)="saveFavicons()"
                    />
                    {{ "disableFavicon" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "disableFaviconDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
        <div class="box">
          <div class="box-content box-content-padded">
            <h2>
              <button
                type="button"
                class="box-header-expandable"
                (click)="showAppPreferences = !showAppPreferences"
                [attr.aria-expanded]="showAppPreferences"
              >
                {{ "appPreferences" | i18n }}
                <i
                  *ngIf="!showAppPreferences"
                  class="bwi bwi-angle-down bwi-sm icon"
                  aria-hidden="true"
                ></i>
                <i
                  *ngIf="showAppPreferences"
                  class="bwi bwi-chevron-up bwi-sm icon"
                  aria-hidden="true"
                ></i>
              </button>
            </h2>
            <ng-container *ngIf="showAppPreferences">
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableTray">
                    <input
                      id="enableTray"
                      type="checkbox"
                      name="EnableTray"
                      [(ngModel)]="enableTray"
                      (change)="saveTray()"
                    />
                    {{ enableTrayText }}
                  </label>
                </div>
                <small class="help-block">{{ enableTrayDescText }}</small>
              </div>
              <div class="form-group" *ngIf="showMinToTray">
                <div class="checkbox">
                  <label for="enableMinToTray">
                    <input
                      id="enableMinToTray"
                      type="checkbox"
                      name="EnableMinToTray"
                      [(ngModel)]="enableMinToTray"
                      (change)="saveMinToTray()"
                    />
                    {{ enableMinToTrayText }}
                  </label>
                </div>
                <small class="help-block">{{ enableMinToTrayDescText }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableCloseToTray">
                    <input
                      id="enableCloseToTray"
                      type="checkbox"
                      name="EnableCloseToTray"
                      [(ngModel)]="enableCloseToTray"
                      (change)="saveCloseToTray()"
                    />
                    {{ enableCloseToTrayText }}
                  </label>
                </div>
                <small class="help-block">{{ enableCloseToTrayDescText }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="startToTray">
                    <input
                      id="startToTray"
                      type="checkbox"
                      name="StartToTray"
                      [(ngModel)]="startToTray"
                      (change)="saveStartToTray()"
                    />
                    {{ startToTrayText }}
                  </label>
                </div>
                <small class="help-block">{{ startToTrayDescText }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="openAtLogin">
                    <input
                      id="openAtLogin"
                      type="checkbox"
                      name="OpenAtLogin"
                      [(ngModel)]="openAtLogin"
                      (change)="saveOpenAtLogin()"
                    />
                    {{ "openAtLogin" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "openAtLoginDesc" | i18n }}</small>
              </div>
              <div class="form-group" *ngIf="showAlwaysShowDock">
                <div class="checkbox">
                  <label for="alwaysShowDock">
                    <input
                      id="alwaysShowDock"
                      type="checkbox"
                      name="AlwaysShowDock"
                      [(ngModel)]="alwaysShowDock"
                      (change)="saveAlwaysShowDock()"
                    />
                    {{ "alwaysShowDock" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "alwaysShowDockDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableBrowserIntegration">
                    <input
                      id="enableBrowserIntegration"
                      type="checkbox"
                      name="EnableBrowserIntegration"
                      [(ngModel)]="enableBrowserIntegration"
                      (change)="saveBrowserIntegration()"
                    />
                    {{ "enableBrowserIntegration" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{ "enableBrowserIntegrationDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableBrowserIntegrationFingerprint">
                    <input
                      id="enableBrowserIntegrationFingerprint"
                      type="checkbox"
                      name="EnableBrowserIntegrationFingerprint"
                      [(ngModel)]="enableBrowserIntegrationFingerprint"
                      (change)="saveBrowserIntegrationFingerprint()"
                      [disabled]="!enableBrowserIntegration"
                    />
                    {{ "enableBrowserIntegrationFingerprint" | i18n }}
                  </label>
                </div>
                <small class="help-block">{{
                  "enableBrowserIntegrationFingerprintDesc" | i18n
                }}</small>
              </div>
              <div class="form-group">
                <label for="theme">{{ "theme" | i18n }}</label>
                <select id="theme" name="Theme" [(ngModel)]="theme" (change)="saveTheme()">
                  <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small class="help-block">{{ "themeDesc" | i18n }}</small>
              </div>
              <div class="form-group">
                <label for="locale">{{ "language" | i18n }}</label>
                <select id="locale" name="Locale" [(ngModel)]="locale" (change)="saveLocale()">
                  <option *ngFor="let o of localeOptions" [ngValue]="o.value">{{ o.name }}</option>
                </select>
                <small class="help-block">{{ "languageDesc" | i18n }}</small>
              </div>
            </ng-container>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
      </div>
    </div>
  </div>
</div>
